ESBuild: تجميع وتحويل جافاسكريبت فائق السرعة

في عالم تطوير الويب المتسارع، تعد أدوات البناء ضرورية لتحسين الأداء وتبسيط سير العمل. ظهر ESBuild كأداة غيرت قواعد اللعبة، حيث يوفر سرعة وكفاءة لا مثيل لها في تجميع وتحويل JavaScript. تقدم هذه المقالة دليلًا شاملاً لـ ESBuild، وتستكشف ميزاته وفوائده وتطبيقاته العملية للمطورين في جميع أنحاء العالم.

ما هو ESBuild؟

ESBuild هو مُجمِّع ومُحوِّل JavaScript مكتوب بلغة Go. الهدف الأساسي منه هو توفير أوقات بناء أسرع بكثير مقارنة بأدوات التجميع التقليدية القائمة على JavaScript مثل Webpack و Parcel و Rollup. يحقق ESBuild هذه السرعة من خلال العديد من التحسينات الرئيسية، بما في ذلك:

• التزامن: يستفيد ESBuild من قدرات التزامن في Go لموازاة العديد من العمليات.
• التعليمات البرمجية الأصلية: نظرًا لأنه مكتوب بلغة Go، يتجنب ESBuild العبء الزائد لبيئات تشغيل JavaScript.
• خوارزميات فعالة: يستخدم ESBuild خوارزميات مُحسَّنة لتحليل التعليمات البرمجية وتحويلها وإنشائها.

يدعم ESBuild مجموعة واسعة من الميزات، مما يجعله أداة متعددة الاستخدامات لتطوير الويب الحديث:

• تجميع JavaScript و TypeScript: يجمع ملفات JavaScript و TypeScript المتعددة في حزم مُحسَّنة.
• تحويل JSX و TSX: يحول بناء جملة JSX و TSX إلى JavaScript قياسي.
• دعم CSS ووحدات CSS: يتعامل مع ملفات CSS، بما في ذلك وحدات CSS، لتصميم ذات نطاق.
• تقسيم التعليمات البرمجية: يقسم التعليمات البرمجية إلى أجزاء أصغر للتحميل عند الطلب، مما يحسن أوقات تحميل الصفحة الأولية.
• التصغير: يقلل حجم التعليمات البرمجية عن طريق إزالة المسافات البيضاء وتقصير أسماء المتغيرات.
• هز الشجرة: يزيل التعليمات البرمجية غير المستخدمة لتقليل حجم الحزمة بشكل أكبر.
• خرائط المصدر: تُنشئ خرائط المصدر لتسهيل تصحيح الأخطاء.
• نظام المكونات الإضافية: يسمح بتوسيع وظائف ESBuild باستخدام مكونات إضافية مخصصة.

لماذا تستخدم ESBuild؟

الفائدة الأساسية من استخدام ESBuild هي سرعته. غالبًا ما تكون أوقات البناء أسرع بكثير من أدوات التجميع الأخرى. تترجم هذه السرعة إلى:

• دورات تطوير أسرع: تعني عمليات الإنشاء الأسرع وقتًا أقل للانتظار والمزيد من الوقت للترميز والاختبار.
• تحسين تجربة المطور: تؤدي بيئة تطوير أكثر استجابة إلى زيادة الإنتاجية والرضا الوظيفي.
• تسريع خطوط أنابيب CI/CD: تسمح أوقات البناء الأقل في خطوط أنابيب CI/CD بعمليات نشر أسرع وحلقات ردود فعل أسرع.

بالإضافة إلى السرعة، يوفر ESBuild مزايا مقنعة أخرى:

• البساطة: غالبًا ما يكون تكوين ESBuild أبسط وأكثر وضوحًا من أدوات التجميع الأخرى.
• الميزات الحديثة: يدعم ESBuild أحدث ميزات JavaScript و TypeScript.
• النظام البيئي المتنامي: على الرغم من أنه أحدث من أدوات التجميع الأخرى، إلا أن النظام البيئي لـ ESBuild ينمو بسرعة مع المكونات الإضافية والعمليات التكاملية التي يساهم فيها المجتمع.

البدء باستخدام ESBuild

لبدء استخدام ESBuild، ستحتاج إلى تثبيت Node.js و npm (أو Yarn) على نظامك.

التثبيت

قم بتثبيت ESBuild عالميًا أو كأحد تبعيات المشروع:

            npm install -g esbuild
# or
npm install --save-dev esbuild
            

              
                Copy
              
            
          

الاستخدام الأساسي

أبسط طريقة لاستخدام ESBuild هي من سطر الأوامر:

            esbuild input.js --bundle --outfile=output.js
            

              
                Copy
              
            
          

يقوم هذا الأمر بتجميع input.js وجميع تبعياته في ملف واحد يسمى output.js.

ملف التكوين (اختياري)

بالنسبة للمشاريع الأكثر تعقيدًا، يمكنك إنشاء ملف تكوين (على سبيل المثال، esbuild.config.js) لتحديد خيارات البناء الخاصة بك:

            // esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm', // or 'cjs' for CommonJS
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

ثم، قم بتشغيل ESBuild باستخدام ملف التكوين:

            node esbuild.config.js
            

              
                Copy
              
            
          

الميزات والإعدادات المتقدمة

يوفر ESBuild مجموعة واسعة من الخيارات لتخصيص عملية الإنشاء الخاصة بك. فيما يلي بعض الميزات وخيارات التكوين الرئيسية:

تقسيم التعليمات البرمجية

يقسم تقسيم التعليمات البرمجية تعليمات تطبيقك إلى أجزاء أصغر يمكن تحميلها عند الطلب. يمكن لهذا الإجراء أن يحسن بشكل كبير أوقات تحميل الصفحة الأولية عن طريق تقليل مقدار JavaScript الذي يحتاج إلى تنزيله وتحليله مسبقًا.

لتمكين تقسيم التعليمات البرمجية، استخدم الخيار format: 'esm' وحدد دليلاً لملفات الإخراج:

            esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

سيقوم ESBuild تلقائيًا بإنشاء أجزاء منفصلة لنقاط دخول تطبيقك وأي وحدات مستوردة ديناميكيًا.

التصغير وهز الشجرة

يعمل التصغير على تقليل حجم التعليمات البرمجية عن طريق إزالة المسافات البيضاء وتقصير أسماء المتغيرات وتطبيق التحسينات الأخرى. تعمل هز الشجرة على إزالة التعليمات البرمجية غير المستخدمة (التعليمات البرمجية التي لم يتم تنفيذها أبدًا) لتقليل حجم الحزمة بشكل أكبر.

لتمكين التصغير وهز الشجرة، استخدم الخيار minify: true:

            esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  treeShaking: true, // Enabled by default when minify is true
  sourcemap: true,
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

يتم تمكين هز الشجرة افتراضيًا عند تمكين التصغير.

المكونات الإضافية

يتيح لك نظام المكونات الإضافية في ESBuild توسيع وظائفه باستخدام مكونات إضافية مخصصة. يمكن استخدام المكونات الإضافية لأداء مجموعة متنوعة من المهام، مثل:

• تحميل الملفات بامتدادات مخصصة.
• تحويل التعليمات البرمجية بطرق محددة.
• التكامل مع أدوات البناء الأخرى.

فيما يلي مثال لمكون إضافي بسيط لـ ESBuild يحل محل جميع تكرارات __VERSION__ بالإصدار الحالي لحزمتك:

            // version-plugin.js
const fs = require('fs');
const path = require('path');

function versionPlugin() {
  return {
    name: 'version-plugin',
    setup(build) {
      build.onLoad({ filter: /\.(js|ts|jsx|tsx)$/ }, async (args) => {
        const contents = await fs.promises.readFile(args.path, 'utf8');
        const packageJsonPath = path.resolve(process.cwd(), 'package.json');
        const packageJson = JSON.parse(await fs.promises.readFile(packageJsonPath, 'utf8'));
        const version = packageJson.version;
        const modifiedContents = contents.replace(/__VERSION__/g, version);
        return {
          contents: modifiedContents,
          loader: args.loader,
        };
      });
    },
  };
}

module.exports = versionPlugin;

            

              
                Copy
              
            
          

لاستخدام المكون الإضافي، قم بتضمينه في تكوين ESBuild الخاص بك:

            // esbuild.config.js
const esbuild = require('esbuild');
const versionPlugin = require('./version-plugin');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [versionPlugin()],
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

البيئات المستهدفة

يتيح لك ESBuild تحديد البيئات المستهدفة للتعليمات البرمجية الخاصة بك. يضمن هذا أن التعليمات البرمجية الخاصة بك متوافقة مع المتصفحات أو إصدارات Node.js التي تستهدفها. ستستخدم المناطق وقواعد المستخدمين المختلفة متصفحات وإصدارات مختلفة. هذه الميزة ضرورية لتطوير التطبيقات العالمية.

استخدم الخيار target لتحديد البيئات المستهدفة:

            esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  target: ['es2015', 'chrome58', 'firefox57', 'safari11', 'edge16'],
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

في هذا المثال، سيقوم ESBuild بتحويل التعليمات البرمجية الخاصة بك لتكون متوافقة مع ES2015 و Chrome 58 و Firefox 57 و Safari 11 و Edge 16.

ESBuild مقابل أدوات التجميع الأخرى

بينما يوفر ESBuild مزايا سرعة كبيرة، من المهم مراعاة المفاضلات الخاصة به مقارنة بأدوات التجميع الأخرى مثل Webpack و Parcel و Rollup.

Webpack

Webpack هو أداة تجميع قابلة للتكوين للغاية ومتعددة الاستخدامات مع نظام بيئي كبير وناضج. إنه يوفر مجموعة واسعة من الميزات والمكونات الإضافية، ولكن تعقيده قد يمثل عائقًا للدخول. يكون ESBuild عادةً أسرع بكثير من Webpack لمعظم المشاريع، ولكن قد يكون النظام البيئي الواسع للمكونات الإضافية لـ Webpack ضروريًا لبعض حالات الاستخدام.

Parcel

Parcel هو أداة تجميع بدون تكوين تهدف إلى توفير تجربة تطوير بسيطة وبديهية. يكتشف أصول مشروعك ويجمعها تلقائيًا، ولكن الافتقار إلى إمكانية التكوين يمكن أن يكون مقيدًا للمشاريع المعقدة. ESBuild أسرع بشكل عام من Parcel ويوفر المزيد من خيارات التكوين.

Rollup

Rollup هو أداة تجميع مصممة خصيصًا لإنشاء مكتبات JavaScript. إنه يتفوق في هز الشجرة وإنشاء حزم مُحسَّنة للغاية. ESBuild أسرع عادةً من Rollup، خاصة بالنسبة للمشاريع الأكبر حجمًا، ويوفر دعمًا أكثر شمولاً لأنواع الملفات والميزات المختلفة.

فيما يلي جدول يلخص الاختلافات الرئيسية:

أمثلة عملية وحالات الاستخدام

يمكن استخدام ESBuild في مجموعة متنوعة من مشاريع تطوير الويب. فيما يلي بعض الأمثلة العملية وحالات الاستخدام:

إنشاء تطبيق React

يمكن استخدام ESBuild لتجميع تطبيق React مع دعم TypeScript و JSX. إليك مثال على التكوين:

            // esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  jsxFactory: 'React.createElement',
  jsxFragment: 'React.Fragment',
  loader: {
    '.ts': 'tsx',
    '.js': 'jsx',
  },
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

يوجه هذا التكوين ESBuild لتجميع ملف src/index.tsx وتحويل بناء جملة JSX و TSX وإنشاء حزمة مُصغَّرة مع خرائط المصدر.

إنشاء تطبيق Vue.js

بينما لا يدعم ESBuild مكونات الملف الواحد Vue.js (ملفات .vue) في الأصل، يمكنك استخدام مكون إضافي مثل esbuild-plugin-vue3 لإضافة الدعم لها. تحظى Vue.js بشعبية في أجزاء كثيرة من العالم، مثل شرق آسيا.

            // esbuild.config.js
const esbuild = require('esbuild');
const vuePlugin = require('esbuild-plugin-vue3');

esbuild.build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  minify: true,
  sourcemap: true,
  plugins: [vuePlugin()],
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

يستخدم هذا التكوين المكون الإضافي esbuild-plugin-vue3 للتعامل مع ملفات .vue وتجميع تطبيق Vue.js الخاص بك.

إنشاء تطبيق Node.js

يمكن أيضًا استخدام ESBuild لتجميع تطبيقات Node.js. قد يكون هذا مفيدًا لإنشاء ملفات قابلة للتنفيذ ذات ملف واحد أو لتحسين وقت بدء تشغيل تطبيقك.

            // esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  platform: 'node',
  format: 'cjs',
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1));

            

              
                Copy
              
            
          

يوجه هذا التكوين ESBuild لتجميع الملف src/index.js لمنصة Node.js، باستخدام تنسيق الوحدة النمطية CommonJS.

ESBuild في مناطق وبيئات مختلفة

تجعل سرعة ESBuild وكفاءته أداة قيمة لمطوري الويب في جميع أنحاء العالم. فيما يلي بعض الاعتبارات لاستخدام ESBuild في مناطق وبيئات مختلفة:

• اتصالات الإنترنت البطيئة: في المناطق التي بها اتصالات إنترنت بطيئة أو غير موثوقة، يمكن لقدرة ESBuild على إنشاء حزم أصغر أن يحسن تجربة المستخدم بشكل كبير.
• موارد الأجهزة المحدودة: يجعل استهلاك ESBuild المنخفض للموارد مناسبًا لبيئات التطوير ذات موارد الأجهزة المحدودة، مثل أجهزة الكمبيوتر المحمولة القديمة أو الأجهزة الافتراضية.
• دعم المتصفح المتنوع: يتيح لك خيار بيئة الهدف في ESBuild التأكد من أن التعليمات البرمجية الخاصة بك متوافقة مع المتصفحات المستخدمة في مناطق مختلفة.
• التدويل والترجمة: يمكن دمج ESBuild مع أدوات التدويل (i18n) والترجمة (l10n) لإنشاء تطبيقات ويب متعددة اللغات.

أفضل الممارسات لاستخدام ESBuild

لتحقيق أقصى استفادة من ESBuild، اتبع أفضل الممارسات التالية:

• استخدام ملف التكوين: بالنسبة للمشاريع المعقدة، استخدم ملف تكوين لتحديد خيارات الإنشاء الخاصة بك. هذا يجعل عملية الإنشاء الخاصة بك أكثر تنظيمًا وقابلة للصيانة.
• تمكين التصغير وهز الشجرة: قم دائمًا بتمكين التصغير وهز الشجرة لتقليل حجم الحزمة وتحسين الأداء.
• استخدام تقسيم التعليمات البرمجية: استخدم تقسيم التعليمات البرمجية لتقسيم تعليمات تطبيقك إلى أجزاء أصغر يمكن تحميلها عند الطلب.
• تحديد البيئات المستهدفة: حدد البيئات المستهدفة للتأكد من أن التعليمات البرمجية الخاصة بك متوافقة مع المتصفحات أو إصدارات Node.js التي تستهدفها.
• استكشاف المكونات الإضافية: استكشف النظام البيئي للمكونات الإضافية في ESBuild للعثور على المكونات الإضافية التي يمكن أن تساعدك في أتمتة المهام والتكامل مع الأدوات الأخرى.
• مراقبة أوقات الإنشاء: راقب أوقات الإنشاء بانتظام لتحديد عنق الزجاجة المحتملة في الأداء.

الخاتمة

ESBuild هو أداة تجميع وتحويل JavaScript قوية وفعالة يمكنها تحسين سير عمل تطوير الويب بشكل كبير. إن سرعته وبساطته وميزاته الحديثة تجعله خيارًا ممتازًا للمشاريع من جميع الأحجام. باتباع أفضل الممارسات الموضحة في هذه المقالة، يمكنك الاستفادة من ESBuild لإنشاء تطبيقات ويب أسرع وأكثر كفاءة وأكثر قابلية للصيانة للمستخدمين في جميع أنحاء العالم.

سواء كنت تقوم ببناء موقع ويب صغير أو تطبيق مؤسسي كبير، يمكن أن يساعدك ESBuild في تحسين عملية تطوير الواجهة الأمامية الخاصة بك وتقديم تجربة مستخدم أفضل. إن سرعته وكفاءته تجعله أصلًا قيمًا لمجموعة أدوات أي مطور ويب. نظرًا لأن مشهد تطوير الويب يستمر في التطور، فإن ESBuild على استعداد لأن يظل الخيار الرائد لتجميع وتحويل JavaScript، مما يمكّن المطورين من إنشاء تطبيقات ويب أسرع وأكثر كفاءة لجمهور عالمي.

بينما يستمر ESBuild في التطور، راقب مساهمات المجتمع والتحديثات الرسمية للاستفادة من أحدث الميزات والتحسينات. من خلال البقاء على اطلاع والمشاركة بنشاط في النظام البيئي لـ ESBuild، يمكنك التأكد من أن مشاريع تطوير الويب الخاصة بك تستفيد من الأداء والقدرات المتطورة التي يوفرها ESBuild.